終於我們要進入跟前端有關的部分了！

今天要帶大家看的是這篇 すべての新米フロントエンドエンジニアに読んでほしい50の資料

姑且翻譯為「希望所有新手前端工程師都讀過的50份資料」吧！

開始這篇之前先來翻譯一下名詞：

新米：菜鳥、菜雞，總而言之就是新手，之後如果在 Qiita 看到 新米 ，可以自己決定要不要略過 XD
フロントエンド：英文 frontend ，前端。
エンジニア：英文 engineer ，工程師。跟上面的一起看就是「前端工程師」。

因為這篇較長，應該會分成三篇並且挑其中幾項來做翻譯。

前言（はじめに）

さいきんのWebはSPA技術を中心としたフロントエンドが賑わっていますね?
従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。
そこで、フロントエンドの経験が浅い方や初学者向けに、おすすめのドキュメントや勉強すべき領域をまとめました。
とりあえず動けば良い段階から一歩進んで、フロントエンドエンジニアとして、良いアプリケーションを作るために必要な知識を浅く広く紹介します。
※補足
新米と表記しましたが、実際には新卒や未経験でなく、新卒2~3年目の若手フロントエンドエンジニアやフロント分野に苦手意識のあるバックエンドエンジニアの方を対象としています。
数日で目を通せるような内容ではないため、マイルストーンやスキルセットの一つの参考にして頂けると幸いです。

最近以 SPA 技術為中心的前端領域的 Web 界非常熱鬧。先前主要使用後端的人開始有越來越多機會接觸前端，從最近才開始學習程式的人也很多是因為對前端抱持著興趣。

因此，我整理了一些推薦閱讀的文件以及建議學習的領域給前端領域的初學者或是經驗尚淺的工程師。總之若是想從「只要可以動就好」的階段更進一步成為一個「可以做出良好應用程式」的前端工程師的話，以下將介紹廣泛而點到為止的必要知識。

※補充
雖然標題是寫「新手」，但實際上不僅限於剛畢業或者沒經驗，剛從事前端2-3年的工程師或者是對於前端不太熟悉的後端工程師都很建議看看這篇。這些內容應該不是花個幾天就可以看完的，若此篇文章能夠作為您的一個里程碑或者是技能組合的參考的話，對我來說非常榮幸。

認識語言

認識 JavaScript （JSを知る）

https://jsprimer.net/basic/introduction/

今からJSを学ぶなら特別な事情がない限り、ES2015以降の文法で良いと思います。
js-primerはES2015以降のJSを知る上で素晴らしいドキュメントです。

現在若要學習 JS ，學習 ES2015 以後的文法較佳。上述的 js-primer 是非常適合學習 ES2015 以後版本的 JS文件。

稍微認識古早的 JavaScript （昔のJSもちょっと知る）

https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures

データの隠蔽やカプセル化を実現するために使われたテクニックです。
今のJSを書く場合に意識する機会は少ないと思いますが、知っておいて損ないです。

閉包是為了將資料隱藏或是封裝而常使用的技術。現在撰寫 JS 比較少機會意識到閉包，但多了解關於閉包有益無害。

https://www.yunabe.jp/docs/javascript_class_in_google.html

ES5以前の古いJSで記述しなきゃいけない仕事に遭遇した際、あらためて読み返したい素晴らしいドキュメントです。ベストプラクティスのひとつだと思います。

這是一份當我在工作上遇到必須使用 ES5 以前的古老 JS 來撰寫時，我會不斷回頭查看的優秀文件。甚至可說是我認為的 best practice 。

昔のJSもしっかり学びたい方は、「JavaScript: The Good Parts」や「開眼！JavaScript」といった書籍の購入も検討してください。
上記の書籍を読んで、DouglasやJohnResigやSubstackを知っていると、先輩のフロントエンドエンジニアから気に入られる確率が向上します（当社比）

若是想更認真地學習傳統 JS 的人，也推薦以下兩本書籍：「JavaScript: The Good Parts」與「開眼！JavaScript」。

認識非同步 （非同期処理を知る）

http://azu.github.io/promises-book/

非同期処理は初学者にとって大きな壁の一つだと思いますが、しっかりとPromiseオブジェクトを理解することがJSでは必須です。
ES2017で追加されたAsync Functionは、Promiseを返す関数なのでPromiseが分かればすぐ理解できます。

非同步對於初學者來說是一個蠻大的障礙，好好地了解 Promise 物件對於學習 JS 來說是非常重要的。在 ES 2017 中加入的 Async Function 是個回傳 Promise 的函式，因此如果懂 Promise 的話非常有助於理解 Async Function 。

Promiseを理解したら、Asyncjsのようなライブラリで複雑な非同期処理を実装したり、
RxJSのようなライブラリを用いてPromise以外の非同期を扱う方法を学んでみると良きです。
理解 Promise 的話，可以試試實裝像是 Asyncjs 這類複雜的非同步函式庫，若能試著學習 RxJS 這類 Promise 以外的非同步函式庫就更好了。

認識 HTMLLivingStandard & ECMAScript（HTMLLivingStandard & ECMAScript を知る）

https://html.spec.whatwg.org/multipage/
https://www.ecma-international.org/publications/standards/Ecma-262.htm

聖書。HTMLやJSといった言語の仕様が記載してあります。

聖經。關於 HTML 以及 JS(ECMAScript) 的規範都記載在此。

ちなみに私のチームでは、実装周りの裁判が発生した際に、六法全書代わりとして活用しています。
※私はおそらく全体の3%ほどしか読んでませんが、ちゃんと読んだぞという空気を出して会話します?

附帶一提，我自己的團隊在遇到是否要實裝相關的問題，會將上述聖經當作六法全書來使用。而我自己大概也才讀了全部內容的 3% 而已，有些問題稍微認真讀一下聖經再來討論可能會比較好吧？

認識 coding 準則 （コーディング規約を知る）

https://qiita.com/mysticatea/items/f523dab04a25f617c87d
https://qiita.com/soarflat/items/06377f3b96964964a65d

これからフロントエンドを学ぶ方すべてに、まずはLintとコードフォーマッターの導入をお勧めします。
Lintではeslintやstylelint、コードフォーマッターではprettierがデファクトです。
利用するルールは何でも良いと思いますが、とにかくルールを用意することが大切です。

對於現在開始學前端的各位，首先建議導入 Lint 以及程式碼排版。
Lint 的話可以選擇 eslint 或是 stylelint ，而程式碼排版則建議 prettier。使用哪一套準則都很好，總之要知道使用準則是非常重要的。

希望今天的翻譯對大家有用，我們明日繼續～